<template>
    <el-form label-width="100px">
      <el-form-item label="SPU 名称"> SPU 名称 </el-form-item>
      <el-form-item label="SKU 名称">
        <el-input placeholder="SKU 名称" v-model="skuInfo.skuName"></el-input>
      </el-form-item>
      <el-form-item label="价格(元)">
        <el-input type="number" v-model="skuInfo.price"></el-input>
      </el-form-item>
      <el-form-item label="重量(千克)">
        <el-input type="number" v-model="skuInfo.weight"></el-input>
      </el-form-item>
      <el-form-item label="规格描述">
        <el-input type="textarea" placeholder="规格描述" rows="4" v-model="skuInfo.skuDesc"></el-input>
      </el-form-item>
      <el-form-item label="平台属性">
        <el-form label-width="100px" :inline="true">
          <el-form-item :label="attr.attrName" v-for="attr in attrList" :key="attr.id">
            <el-select placeholder="请选择" v-model="attr.attrIdValueId">
              <el-option :value="`${item.attrId}:${item.id}`" v-for="item in attr.attrValueList" :key="item.id" :label="item.valueName"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="销售属性">
        <el-form label-width="100px" :inline="true">
          <el-form-item :label="sale.saleAttrName" v-for="sale in spuSaleAttrList" :key="sale.id">
            <el-select placeholder="请选择" v-model="sale.attrIdAttrValueId">
              <el-option :value="`${item.baseSaleAttrId}:${item.id}`" v-for="item in sale.spuSaleAttrValueList" :key="item.id" :label="item.saleAttrValueName"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
  
      <el-form-item label="图片列表">
        <el-table :data="spuImgList" border stripe @selection-change="selectImg">
          <el-table-column type="selection" width="55" label="序号"/>
          <el-table-column label="图片">
            <template #="{row}">
              <img :src="row.imgUrl" alt="" width="100">
            </template>
          </el-table-column>
          <el-table-column label="名称" prop="imgName"></el-table-column>
          <el-table-column label="操作">
            <template v-slot="{row}">
              <span v-if="row.isDefault==='1'">默认图片</span>
              <el-button v-else type="primary" @click="changeDefault(row)">设为默认</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">保存</el-button>
        <el-button type="default" @click="emit('setState', 0)">取消</el-button>
      </el-form-item>
    </el-form>
  </template>
  
  <script lang="ts">
  import { defineComponent } from "vue";
  
  export default defineComponent({
    name: "SkuForm",
  });
  </script>
  
  <script setup lang="ts">
  import { requestNowSpuSaleAttrList, type reqSpuSaleAttrListType, type reqSpuInfoType, requestNowSpuImageList, type reqSpuImageListType, type reqSpuImageListItemType } from "@/api/spu";
  import { storeToRefs } from "pinia";
  import useAttrStore from "@/stores/attr";
  import { requestAttrInfo, type reqAttrReturnType } from "@/api/attr";
  import {onMounted, ref} from 'vue'
  import type { reqSkuInfoItemType } from "@/api/sku";
  
  //1.接受props传值
  const props = defineProps<{
    spuInfo: reqSpuInfoType;
  }>();
  const spuInfo = props.spuInfo;
  
  //2.接受自定义事件,用来切换组件
  const emit = defineEmits<{
    (event: "setState", state: number, row?: reqSpuInfoType): void;
  }>();
  
  //3.拿到pinia中的三级分类数据
  const attrStore = useAttrStore();
  const { category1Id, category2Id, category3Id } = storeToRefs(attrStore);
  
  //定义上传的skuInfo
  const skuInfo = ref<reqSkuInfoItemType>({
      //数据双向绑定
      price: 0,
      skuName: '',
      skuDesc: '',
      weight: '',
      //spuInfo中获取
      tmId: 0,
      spuId: 0,
      category3Id: 0,
      //计算后设置
      skuDefaultImg: '',
      skuImageList: [],
      skuAttrValueList: [],
      skuSaleAttrValueList: []
  })
  //定义初始化数据
  //所有平台属性列表
  const attrList = ref<reqAttrReturnType>([])
  //当前spu销售属性列表
  const spuSaleAttrList = ref<reqSpuSaleAttrListType>([])
  //当前图片列表
  const spuImgList = ref<reqSpuImageListType>([])
  const getInitData = async () => {
    const promise1 = requestAttrInfo(
      category1Id.value as number,
      category2Id.value as number,
      category3Id.value as number
    );
    const promise2 = requestNowSpuSaleAttrList(spuInfo.id as number);
    const promise3 = requestNowSpuImageList(spuInfo.id as number);
  
    const result = await Promise.all([promise1, promise2, promise3]);
    attrList.value = result[0]
    spuSaleAttrList.value = result[1]
    spuImgList.value = result[2]
  };

  //初始化请求
  onMounted(() => {
      getInitData()
  })
  interface imgType{
    id: number,
    imgName: '',
    imgUrl: '',
    spuId: 0
  }
  //不能直接赋值给spuImgList
  const newImgList = ref<reqSpuImageListType>([])
  //选中图片
  const selectImg = (val:imgType[]) => {
      newImgList.value = val
  }

  //设置为默认图片
  const changeDefault = (row:reqSpuImageListItemType) => {
      //排他设置默认
      spuImgList.value.forEach(item => {
        item.isDefault = '0'
      })
      row.isDefault = '1'
  }
  </script>
  